<template>
    <view class="page">
        <coupon
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            showType="num"
            @numberBoxChange="numberBoxChange"
        />
        
        <view class="bottomSettlement">
            <view class="left">
                <text class="key">应付合计：</text>
                <text class="unit">¥</text><text class="money">{{payMonetNum}}</text>
            </view>
            <view class="right">
                <u-button type="primary" text="去支付" shape="circle" :hairline="false"/>
            </view>
        </view>
    </view>
</template>

<script>
    import coupon from '@/components/coupon.vue';
    export default {
        components: {
            coupon
        },
        data() {
            return {
                list: [{
                    id: 1,
                    url: "/pages/brand/index/id/1",
                    money: "30",
                    num: 1,
                    title: "满2000减150元",
                    ticket: "YMC_5c929fbf47235",
                    seller_name: "百达翡丽官方旗舰店",
                    end_time: "2019-04-20 01:51:20",
                    state: "1"
                }, {
                    id: 2,
                    url: "/pages/brand/index/id/1",
                    money: "30",
                    num: 2,
                    title: "满1000减50元",
                    ticket: "YMC_5c929fbf47235",
                    seller_name: "百达翡丽官方旗舰店",
                    end_time: "2019-04-20 01:51:20",
                    state: "1"
                }]
            };
        },
        computed: {
            payMonetNum() {
                let money = 0
                this.list.map(i => {
                    money += i.money * i.num
                })
                return money
            }
        },
        methods: {
            numberBoxChange(e) {
                this.list.find(i => i.id == e.name).num = e.value
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        margin: 0 30rpx;
        
        .bottomSettlement {
            position: absolute;
            bottom: 50rpx;
            width: calc(100% - 60rpx);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                .key {
                    font-family: PingFang SC, PingFang SC;
                    font-size: 30rpx;
                    color: $uni-text-color-grey-6;
                }
                .unit {
                    font-family: DIN Alternate, DIN Alternate;
                    font-weight: bold;
                    font-size: 24rpx;
                    color: $uni-text-color-money;
                }
                .money {
                    font-family: DIN Alternate, DIN Alternate;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: $uni-text-color-money;
                }
            }
            
            .right {
                width: 240rpx;
            }
        }
    }
</style>
